<script>
export default {
  name: 'BaseTabs',
  props: {
    tabs: {
      type: Array,
      default: () => [{ id: 0, label: '商店' }],
    },
    value: {
      type: [String, Number],
      default: 0,
    },
    small: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
    }
  },
  mounted() {
  },
  methods: {
    selectTab(id) {
      if (this.value != id) {
        this.$emit('update:value', id)
        this.$emit('change', id)
      }
    },
  },
}
</script>

<template>
  <view class="form-tabs">
    <view v-for="(tab, i) in tabs" :key="i" class="tabs-tab" :class="{ active: tab.id == value, small }" @click="selectTab(tab.id)">
      {{ tab.label }}
    </view>
  </view>
</template>

<style scoped lang="scss">
.form-tabs {
  height: 35x;
  line-height: 35px;
  width: 100%;
  position: relative;
  overflow: hidden;
  display:flex;
  font-weight: bold;
  
  .tabs-tab {
    display:block;
    position: absolute;
    bottom: 0px;
    border: none;
    padding: 0px 15px 0;
    margin-bottom: 10px;
    height: 100%;
    flex-grow: 1;
    text-align: center;
    color: #b2a59d;
    position: relative;
    border-bottom: 2px solid #413a30;
    &.active {
      background: linear-gradient(to top, rgba(255,191,39,0.4), rgba(93,58,22,0.1));
      border-bottom: 2px solid #ffdb7f;
      color: white;
      height: calc(100% + 1px);
      z-index: 10;

      &::before{
        content: '';
        position: absolute;
        bottom: -10px;
        left: calc(50% - 10px);
        height: 20px;
        width: 20px;
        background: url("../img/GLBUI_GameSetting_Icon2depth.png") no-repeat;
        background-size: 100%  100%;
        z-index: 233;
      }
    }

    &.small {
      min-width: 10px;
      padding: 1px 7px 4px;
    }
  }
}
</style>
